<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="password"><span></span><br>
    重复密码：<input type="text" id="password2"><span></span><br>
    手机号：<input type="text" id="tel"><span></span><br>
    邮箱：<input type="text" id="email"><span></span><br>
    <input type="button" id="send" value="验证">
</body>
<script>
    // 1.用户名           用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
    // 2.密码的规则        数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
    // 3.重复密码            跟第一次输入 密码一致
    // 4.手机号的验证      第一位必须为1，后面再加10位数字
    // 5.邮箱                数字大小写字母_- 3到12位   @  数字字母 2到9位  . 字母2到5位
    // 6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳

    var ouser = document.getElementById("username");
    var opass = document.getElementById("password");
    var opass2 = document.getElementById("password2");
    var otel = document.getElementById("tel");
    var oemail = document.getElementById("email");
    var osend = document.getElementById("send");

    // 用来记录每个输入框的验证结果
    // 某个输入框成功时，修改对应的状态为true
    // 某个输入框失败时，修改对应的状态为false
    var userFlag=passFlag=pass2Flag=telFlag=emailFlag = false;

    ouser.onblur = function(){
        if(/^[\u2e80-\u9fff\w\-]{4,20}$/.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            userFlag = true;
        }else{
            this.nextElementSibling.innerHTML = "no ok";
            userFlag = false;
        }
    }
    opass.onblur = function(){
        var a=b=c=0;
        if(/\d/g.test(this.value)){
            a = 1;
        }
        if(/[a-z]/gi.test(this.value)){
            b = 1;
        }
        if(/[^\da-z]/gi.test(this.value)){
            c = 1;
        }
        switch(a+b+c){
            case 1:this.nextElementSibling.innerHTML = "弱";break;
            case 2:this.nextElementSibling.innerHTML = "中";break;
            case 3:this.nextElementSibling.innerHTML = "强";break;
        }

        passFlag = true;

        if(opass2.value === "") return;
        if(opass2.value === this.value){
            opass2.nextElementSibling.innerHTML = "一致";
            pass2Flag = true
        }else{
            opass2.nextElementSibling.innerHTML = "不一致"
            pass2Flag = false
        }
    }
    
    opass2.onblur = function(){
        if(this.value === opass.value){
            this.nextElementSibling.innerHTML = "一致"
            pass2Flag = true
        }else{
            this.nextElementSibling.innerHTML = "不一致"
            pass2Flag = false
        }
    }
    
    otel.onblur = function(){
        if(/^1[3-9]\d{9}$/.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            telFlag = true
        }else{
            this.nextElementSibling.innerHTML = "no ok";
            telFlag = false
        }
    }

    oemail.onblur = function(){
        if(/^[\da-z]{2,6}@[a-z\d]{2,6}\.[a-z]{2,5}$/.test(this.value)){
            this.nextElementSibling.innerHTML = "ok";
            emailFlag = true
        }else{
            this.nextElementSibling.innerHTML = "no ok";
            emailFlag = false
        }
    }

    osend.onclick = function(){
        if(userFlag && passFlag && pass2Flag && telFlag && emailFlag){
            alert("成功");
        }else{
            alert("失败");
        }
    }




</script>
</html>